<script setup lang="ts">
import { ref } from 'vue';
import { useRouterPush } from '@/composables';
import { useGetPhone, useGetOpenid } from '@/hooks';
import { hideLoading, showLoading, showToast } from '@tarojs/taro';
import { useNurseStore } from '@/store';
import { storeToRefs } from 'pinia';
import { localStg } from '@/utils';

definePageConfig({
    navigationBarTitleText: '登录页'
});

const { toPrivacy, toHome, toNurselogin } = useRouterPush();

const { company } = storeToRefs(useNurseStore());

async function getPhoneNumber(e: any) {
    console.log(e, "e=======================")
    localStg.remove('nurseNurses');
    localStg.remove('nurse_openid');
    const phoneCode = e?.detail?.code;

    showLoading({ title: '正在登录...' });

    const flag = await useGetPhone(phoneCode);

    if (flag) {
        hideLoading();
        toHome();
    } else {
        hideLoading();
        showToast({
            title: '取用户信息失败',
            icon: 'error',
            duration: 1500
        });
    }
}

async function gotologin() {
    localStg.remove('nurseNurses');
    localStg.remove('nurse_openid');

    showLoading({ title: '正在登录...' });

    const flag = await useGetOpenid();

    if (flag) {
        hideLoading();
        toHome();
    } else {
        hideLoading();
        showToast({
            title: '取用户信息失败',
            icon: 'error',
            duration: 1500
        });
    }
}
const checkbox = ref(false);
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="登录页" /> -->
        <view class="w-375px h-full flex-col-center fixed-lt">
            <view class="w-375px h-full flex-col-center">
                <view class="w-260px h-full flex-col-center">
                    <view class="flex-center">
                        <logo style="height: 100px; width: 100px" />
                    </view>
                    <view class="mt-3 font-bold text-#059669 text-lg text-#000">{{ company.departName }}</view>
                    <view class="mt-3 text-#000">{{ company.fax }}</view>
                    <view class="mt-3 font-bold text-#059669">
                        <view class="w-280px flex-center justify-around mt-3">
                            <view
                                class="bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 w-120px b-rounded-2 h-60px flex-center justify-around">
                                <view class="flex-col-center">
                                    <view class="i-local-online w-30px h-30px text-#059669" />
                                </view>
                                <view class="flex-col-center">
                                    <view class="">线上申请</view>
                                    <view class="">居家服务</view>
                                </view>
                            </view>
                            <view
                                class="bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 w-120px b-rounded-2 h-60px flex-center justify-around">
                                <view class="flex-col-center">
                                    <view class="i-local-protect w-30px h-30px text-#059669" />
                                </view>
                                <view class="flex-col-center">
                                    <view>专业医护</view>
                                    <view>安全放心</view>
                                </view>
                            </view>
                        </view>
                        <view class="w-280px flex-center justify-around mt-3">
                            <view
                                class="bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 w-120px b-rounded-2 h-60px flex-center justify-around">
                                <view class="flex-col-center">
                                    <view class="i-local-medal w-30px h-30px text-#059669" />
                                </view>
                                <view class="flex-col-center">
                                    <view>管理完善</view>
                                    <view>服务规范</view>
                                </view>
                            </view>
                            <view
                                class="bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 w-120px b-rounded-2 h-60px flex-center justify-around">
                                <view class="flex-col-center">
                                    <view class="i-local-service w-30px h-30px text-#059669" />
                                </view>
                                <view class="flex-col-center">
                                    <view>三方投保</view>
                                    <view>防控风险</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="mt-6 w-full flex-col-center">
                        <nut-button :disabled="!checkbox" :color="checkbox ? '#059669' : ''" size="large"
                            class="important:w-280px font-bold" @click.stop="gotologin">
                            授权登录
                        </nut-button>
                        <view class="my-6 text-#059669" @click="toHome">暂不授权</view>
                        <!-- <button 
                            open-type="getPhoneNumber" 
                            @getphonenumber="getPhoneNumber"
                            class="auth-button"
                            style="width: 280px; height: 40px; background: #059669; color: white; border: none; border-radius: 4px;"
                        >
                            获取手机号
                        </button> -->
                    </view>
                    <view class="w-full flex-center">
                        <nut-checkbox v-model="checkbox" />
                        <text class="text-12px w-full">
                            本人已审慎阅读、充分理解且同意
                            <i class="text-#059669" @click="toPrivacy()">《用户授权协议》</i>
                            中的全部条款内容
                        </text>
                    </view>
                </view>
            </view>
        </view>
    </basic-layout>
</template>

<style scoped></style>
